<%@ page import="org.jeecgframework.core.util.ResourceUtil" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@include file="../../mytags.jsp" %>
<t:base type="jquery"></t:base>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>我的同事</title>
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <style>
        .delspan {
            width: 40px;
            height: 17.5px;
            line-height: 18px;
            margin-right: 10px;
            border-radius: 5px;
            background: #f16671;
            display: block;
            float: right;
            text-align: center;
            color: #fff;
            font-size: 12px;
            cursor:pointer;
        }
        .inrr{
            width:100%;
        }
        .inrr h4 span{
            width:25%;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    var showEdit = "${showEdit}";

    function goEdit(id) {
        mui.openWindow({
            url: 'zyContactsController.do?goWxEdit&id='+id,
            createNew: true
        });

    }
    function query() {
        var searchContent = $("#searchInput").val();
        $("#ctUl").empty();
        $.getJSON("zyContactsController.do?search", {
            searchContent: searchContent
        }, function (data) {
//                mui("#demo1").progressbar().hide();
            if (data.length > 0) {
                $.each(data, function (idx, itm) {
                    console.log(itm);
                    var li = $("<li class='mui-table-view-cell we'/>");
                    var strHtml =
                            '<h2>' + itm.name +
                            (showEdit == "1"?'<span class="delspan" onclick="goEdit(\''+itm.id+'\')">编辑</span>' :"")+"</h2>"+
                            '<a class="mui-navigate-right set_im" href="zyContactsController.do?wxDetail&id=' + itm.id + '">'+
                            '<div class="inrr"> ' +
                            '<h4><span>所在职位</span>' + itm.positionText + '&nbsp;</h4>' +
                            '<h4><span>联系电话</span>' + ($.isEmptyObject(itm.cellphone1) ? '&nbsp;' : itm.cellphone1) + '</h4>'+
                            '<h4><span>会员等级</span>'+itm.level+'&nbsp;</h4>';
                    strHtml += '</div></a>';
                    li.html(strHtml);
                    $("#ctUl").append(li);
                })
            } else {
                $("#ctUl").empty();
            }
        })
    }
    $(function () {
        $("#searchInput").val('');
        $("#a_seach").click(function () {
            query();
        });
        query();
        $("select").css({
            "font-size":"14px",

        });
    })
</script>
<div class="mui-backdrop" id="addDialog" style="display:none">
    <form id="contactForm" action="javascript:return false;">
        <div class="mui-input-group" style="position:fixed;top:30%;width:80%;left:11%;z-index:10001">
            <input id='belongCinema.id' name="belongCinema.id" type="hidden" value="${ct.belongCinema.id}"/>
            <input name="type" type="hidden" value="<%=StaticValue.DIC_CONTACT_TYPE_CINEMA_CONTACT%>"/>
            <input name="state" type="hidden" value="<%=StaticValue.DIC_ENGINEER_STATE_ONJOB%>"/>
            <div class="mui-input-row">
                <label class="dg"><img src="${webRoot }images/xx1.png" style="width: 12px">姓名 </label>
                <input id='name' name="name" type="text" class="mui-input" placeholder="请输入联系人姓名" value="">
            </div>
            <div class="mui-input-row">
                <label class="dg"><img src="${webRoot }images/phone.png" style="width: 12px">手机号 </label>
                <input id='cellphone1' name="cellphone1" type="text" placeholder="请输入联系人手机号" class="mui-input">
            </div>
            <div class="mui-input-row">
                <label class="dg"><img src="${webRoot }images/xx8.png" style="width: 12px">职位 </label>
                <t:dictSelect field="position" id="position"
                              hasLabel="false" type="select" typeGroupCode="<%=StaticValue.DIC_CINEMA_DEPART %>">
                </t:dictSelect>
            </div>
            <div class="mui-input-row mui-input-row1" style="float:left;margin-left:9%;margin-top:7px;margin-bottom: 5px;background-color: white">
                <span class="mui-btn mui-btn-primary" href="#" style="width:120px; "
                  onclick="confirmAdd()">确定</span>
                <span class="mui-btn mui-btn-primary" href="#"
                      style="width:120px;background: #DDD;border:1px solid #DDD;margin-right: 10px;color:black"
                      onclick="$('#addDialog').hide();">取消</span>
            </div>
        </div>
    </form>

</div>
<div class="mui-content"
     style="margin-top: 10px; width: 100%; background: #fff; padding: 15px;border-radius:0;">
    <form id='login-form' class="mui-input-group" action="javascript:query();">
        <div class="mui-input-row mui-input-row1" style="height: 40px;padding-left: 5px;">
            <input type="text" class="mui-input" placeholder="请输入姓名或电话" id="searchInput" style="width:80%;"
                   value="">
            <label style="float: right; width: 50px;text-align: left;padding-top:10px;" id="a_seach"><a><img
                    src="${webRoot}/images/sach.png" style="width: 25px;"></a> </label>
        </div>
    </form>
</div>
<div class="mui-content" style="margin-top: 0px;margin-bottom: 70px; width: 100%;">
    <div class="mui-content" style="width: 100%;margin-top: 0px; border-radius: 0; background: none;">
        <div class="mui-card eq1" style="margin: 0;box-shadow:none; background: none;">
            <ul class="mui-table-view eeq" id="ctUl">
            </ul>
        </div>
    </div>
</div>
<div style="position: fixed;bottom:2px;width:95%;left:2%">
    <a class="mui-btn mui-btn-block mui-btn-primary" href="#" onclick="addContact()" >添加</a>
</div>

</body>
<script type="text/javascript">
    function addContact() {
        $("#addDialog").show();
    }

    function confirmAdd(flag) {
        var name = $("#name").val();
        if (name == '' || name.length > 10) {
            mui.toast("请输入姓名");
            return;
        }
        var phone = $("#cellphone1").val();
        var regex = new RegExp(/^1[0-9]{10}$/);
        if (!regex.test(phone)) {
            mui.toast("手机号为空或格式不正确");
            return;
        }
        var position = $("select[name='position']").val();
        if (position == '') {
            mui.toast("请选择职位");
            return;

        }
        $.post("zyContactsController.do?doAdd", $("#contactForm").serialize(), function (data) {
            if (!$.isEmptyObject(data)) {
                data = $.parseJSON(data);
                if (data.success) {
                    query();
                    $("#addDialog").hide();
                } else {
                    mui.alert(data.msg);
                }
            }
        })
    }
</script>
</html>
